<template>
  <div id="app" class="myOrderDetail">
    <loading v-if="loading"></loading>
    <div v-else>
        <div class="order_detail_top">
            <div class="flex">
               <div>
                  <img v-if="type==2?order.order_head:order.head" class="order_detail_head" :src="type==2?order.order_head:order.head" @error="errorimg" />
                  <img v-else class="order_detail_head" src="../../../assets/img/default_head.png" />
               </div>
               <div>
                  <div class="flex">
                    <p v-text="type==2?order.order_nickname:order.nickname"></p>
                    <img v-if="type==2 && order.order_sex==2" src="../../../assets/img/sex-female.png"  class="sex-btn"/>
                    <img v-if="type==2 && order.order_sex==1" src="../../../assets/img/sex-male.png" class="sex-btn" />
                
                    <img v-if="type==1 && order.sex==2" src="../../../assets/img/sex-female.png" class="sex-btn"/>
                    <img v-if="type==1 && order.sex==1" src="../../../assets/img/sex-male.png" class="sex-btn" />
                  </div>
                  <div>
                    <img v-if="type==1 && level_id" :src="require('../../../assets/img/vip_icon'+order.level_id+'.png')" class="vip_icon" />
                    <img v-if="type==2 && order_level_id" :src="require('../../../assets/img/vip_icon'+order.order_level_id+'.png')" class="vip_icon" />
                  </div>
               </div>
            </div>
            <div class="contact center" @click="sendMessageFun(order)">联系TA</div>
        </div>
        <div class="hr"></div>
        <div class="order_info">
          <div>
              <div class="title">开始时间</div>
              <div>{{order.begin_time | time("yyyy-MM-dd hh:mm",order.begin_time)}}  每{{order.units}}</div>
          </div>
          <div style="border-bottom: 0;">
              <div class="title">金额</div>
              <div><span class="order_money" v-text="'￥'+order.order_payment_price"></span></div>
          </div>
        </div>
        <div class="info-red" v-if="status == 2 && type==2">
            * 确认接单后，服务生效，请提供给用户最好的服务吧
        </div>
        <div class="info-red" v-if="status == 9 && type==1">
            * 对方取消订单，您的付款会3个工作日内原路退回
        </div>
        <div class="info-red" v-if="status == 4 && type==1">
            * 点击完成,款项将会发送至对方账户
        </div>
        <div class="order_remark flex-between">
            <div class="title">备注</div>
            <div class="content text-right moreDot" v-text="order.remark || '无'"></div>
        </div>
        <div class="hr"></div>
        <div class="order_status">
            <div class="flex-between">
               <div class="order_status_text">
                  <span v-if="status == 1">订单未支付</span>
                  <span v-if="status == 2" style="color: #F8A130;">等待接单</span>
                  <span v-if="status == 3">订单待服务</span>
                  <span v-if="status == 4">订单服务中</span> <!-- 去申诉 -->
                  <!-- <span v-if="order.status == 41">服务中</span> -->
                  <span v-if="status == 5">订单已完成</span> <!-- 去评价 -->
                  <span v-if="status == 6">订单申诉中</span>
                  <span v-if="status == 7">订单申诉成功</span>
                  <span v-if="status == 8">订单申诉驳回</span>
                  <span v-if="status == 9">订单已取消</span>
                  <span v-if="status == 99">订单已完成</span>
               </div>
               <div class="text-left" v-if="starInfo.star">
                  <img v-if="starInfo.star>=1" src="../../../assets/img/skill-star.png" class="skill-star" />
                  <img v-if="starInfo.star>=2" src="../../../assets/img/skill-star.png" class="skill-star" />
                  <img v-if="starInfo.star>=3" src="../../../assets/img/skill-star.png" class="skill-star" />
                  <img v-if="starInfo.star>=4" src="../../../assets/img/skill-star.png" class="skill-star" />
                  <img v-if="starInfo.star>=5" src="../../../assets/img/skill-star.png" class="skill-star" />
                  <img v-if="starInfo.star<5" src="../../../assets/img/skill-star-no.png" class="skill-star" />
                  <img v-if="starInfo.star<4" src="../../../assets/img/skill-star-no.png" class="skill-star" />
                  <img v-if="starInfo.star<3" src="../../../assets/img/skill-star-no.png" class="skill-star" />
                  <img v-if="starInfo.star<2" src="../../../assets/img/skill-star-no.png" class="skill-star" />
                  <!--<img v-if="starInfo.half_star>=5" src="../../../assets/img/skill-half-star.png" class="skill-star">-->
                </div>
            </div>
            <div style="margin-top: .11rem" class="orderdetail_footer">
                <div>
                   <div>订单编号：</div>
                   <div v-text="order.number"></div>
                </div>
                <div v-if="starInfo.close_time">
                   <div>结束时间：</div>
                   <div>{{starInfo.close_time | time("yyyy-MM-dd hh:mm",starInfo.close_time)}}</div>
                </div>
                <div v-if="status == 9">
                   <div>取消原因：</div>
                   <div v-text="starInfo.reason || '无'"></div>
                </div>
                <div v-if="status == 9">
                   <div>取消时间：</div>
                   <div>{{starInfo.cancel_time | time("yyyy-MM-dd hh:mm",starInfo.cancel_time)}}</div>
                </div>

                <div v-if="status == 8">
                   <div>驳回原因：</div>
                   <div v-text="starInfo.reject_reason || '无'"></div>
                </div>
                <div v-if="status == 8">
                   <div>驳回时间：</div>
                   <div>{{starInfo.feedback_time | time("yyyy-MM-dd hh:mm",starInfo.feedback_time)}}</div>
                </div>
                <div v-if="status == 2">
                   <div>{{starInfo.begin_time | time("yyyy-MM-dd hh:mm",starInfo.begin_time)}}前未接单将自动退款</div>
                   <div v-text="starInfo.is_pay==1?'已付款':'未付款'"></div>
                </div>
                <div v-if="status == 4">
                   <div>{{starInfo.end_time | time("yyyy-MM-dd hh:mm",starInfo.end_time)}}前结束订单</div>
                   <div v-text="starInfo.is_pay==1?'已付款':'未付款'"></div>
                </div>
                <div v-if="status == 6">
                   <div v-text="starInfo.text"></div>
                   <div v-text="starInfo.is_pay==1?'已付款':'未付款'"></div>
                </div>
            </div>
        </div>

        <div class="fixed_btn center" v-if="status == 6 && type==1" @click="cancelAppeal">取消申诉</div>
        <div class="fixed_btn center" v-if="status == 5 && type==1" @click="enterEvaluate">去评价</div>
        <div class="fixed_btn center" v-if="status == 2 && type==1" @click="cancelOrder">取消订单</div>
        <div v-if="status == 2 && type==2" class="footer">
          <div @click="cancelExceptOrder">
              <div class="center common_btn" >取消订单</div>
          </div>
          <div  @click="sureOrder">
             <div class="center common_btn"  style="border-left: .02rem solid #fff;">确认订单，通知对方</div>
          </div>
        </div>
        <!-- 服务中下单者操作按钮 -->
        <div v-if="status == 4 && type==1" class="footer">
          <div @click="enterProblem">
              <div class="center common_btn" >遇到问题</div>
          </div>
          <div  @click="finishOrder">
             <div class="center common_btn"  style="border-left: .02rem solid #fff;">完成订单</div>
          </div>
        </div>
    </div>
  </div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import { Header } from 'mint-ui';
import Loading from "components/loading.vue"
export default {  
  data(){
    return {
        order:{},
        loading:false,
        status:'',
        starInfo:{},
        type:'' //1 我约 2 约我
    }
  },
  components:{ Loading,Header },
  mounted:function(){
      this.orderId = common.getQueryString('orderId');
      this.getStatus();
      //发消息
      window["sendMessageFunction"] = (obj)=>{
        var newObj = {};
        if(this.type==2){
            newObj = {
                "uid":obj.uid,
                "head":obj.order_head,
                "nickname":obj.order_nickname
            }
        }else{
            newObj = {
                "uid":obj.to_uid,
                "head":obj.head,
                "nickname":obj.nickname
            }
        }
        if(common.platform == 'ios'){
            sendMessage(JSON.stringify(newObj));
        }else{
            window.user.contact(parseInt(newObj.uid));
        }
      }
  },
  methods: {
      errorimg:function(){
        if(this.type == 2){
            this.order.order_head = require("assets/img/default_head.png");
        }else{
            this.order.head = require("assets/img/default_head.png");
        }
      },
      //获取订单详情
      getOrderDetail:function(){
          common.ajax({
              type:'GET',
              url:'api/adder/order/'+this.orderId
          }).then(res=>{
             this.loading = false;
             this.order = res.data;
             this.getOrderevaluate();
          })
      },
      //获取订单状态
      getStatus:function(){
          common.ajax({
              type:'GET',
              url:'api/adder/order/'+this.orderId+"/checkstatus"
          }).then(res=>{
              this.status = res.data.status;
              this.type = res.data.user_type;
          }).then(()=>{
             this.getOrderDetail();
          })
      },
      //获取订单状态信息
      getOrderevaluate:function(){
          common.ajax({
              type:'GET',
              url:'api/adder/order/'+this.orderId+"/status/"+this.status
          }).then(res=>{
              this.starInfo = res.data;
          })
      }, 
      //发消息
      sendMessageFun:function(obj){
        window.sendMessageFunction(obj);
      },
      //订单完成下单者去评价
      enterEvaluate(){
        location.href = "./../../views/orderevaluate/index.html?h5=true&orderId="+this.orderId;
      },
      //订单服务中下单者去反馈问题=去申诉
      enterProblem(){
       location.href = "./../../views/orderproblem/index.html?h5=true&orderId="+this.orderId;
      },
      //接单者去取消订单
      cancelExceptOrder(){
          location.href = "./../../views/ordercancel/index.html?h5=true&orderId="+this.orderId;
      },
      //下单者取消订单
      cancelOrder(){
          common.ajax({
            url:'api/adder/order/'+this.orderId+'/cancel',
          }).then(res=>{
             common.errMessage(res.info);
             this.getStatus();
          })
      },
      //接单者接受订单
      sureOrder(){
          common.ajax({
              url:'api/adder/order/'+this.orderId+"/receive"
          }).then(res=>{
              common.errMessage(res.info);
              this.getStatus();
          })
      },
      //下单者取消申诉
      cancelAppeal(){
        common.ajax({
              url:'api/adder/order/'+this.orderId+"/feedback/"+this.starInfo.feedback_id+"/cancel"
          }).then(res=>{
              common.errMessage(res.info);
              this.getStatus();
          })
      },
      //下单者完成订单
      finishOrder(){
          common.ajax({
              url:'api/adder/order/'+this.orderId+"/complete"
          }).then(res=>{
              common.errMessage(res.info);
              this.getStatus();
          })
      }
  }
} 
</script>

